import Link from "next/link";
import { notFound } from "next/navigation";
import { ArrowLeft, LifeBuoy } from "lucide-react";
import { ERROR_MESSAGES, type ErrorCode } from "@fetcha/core";
import { getWorkspace } from "@/lib/session";
import { formatBytes, formatDate, formatMs, formatUsd, timeAgo } from "@/lib/format";
import { getRequestDetail } from "@/lib/queries/dashboard";
import { PageHeader } from "@/components/ui/page-header";
import { Badge, StatusBadge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { CopyButton } from "@/components/ui/copy-button";
import { Alert } from "@/components/ui/alert";
import { RequestDetailTabs } from "@/components/dashboard/requests/request-detail-tabs";
import { TimingWaterfall } from "@/components/dashboard/requests/timing-waterfall";
import { AttemptsTimeline } from "@/components/dashboard/requests/attempts-timeline";
import { HeadersTables } from "@/components/dashboard/requests/headers-table";
import { HttpCode, NetworkLabel } from "@/components/dashboard/requests/requests-table";

export const dynamic = "force-dynamic";

function Row({ label, children, mono }: { label: string; children: React.ReactNode; mono?: boolean }) {
  return (
    <div className="grid grid-cols-[140px_1fr] gap-3 px-4 py-2.5 text-[13px] sm:grid-cols-[180px_1fr]">
      <dt className="text-fg-subtle">{label}</dt>
      <dd className={`min-w-0 break-all ${mono ? "font-mono tabular" : ""}`}>{children}</dd>
    </div>
  );
}

export default async function RequestDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const [ws, { id }] = await Promise.all([getWorkspace(), params]);
  if (!/^req_[A-Za-z0-9]{4,64}$/.test(id)) notFound();
  const req = await getRequestDetail(ws.organization.id, id, { providerVisibility: ws.organization.providerVisibility });
  if (!req) notFound();

  const headerCount = Object.keys(req.requestHeaders ?? {}).length + Object.keys(req.responseHeaders ?? {}).length;
  const errorHelp = req.errorCode && req.errorCode in ERROR_MESSAGES ? ERROR_MESSAGES[req.errorCode as ErrorCode] : null;
  const otherProject = req.projectId !== ws.project.id;

  const overview = (
    <div className="grid gap-4 lg:grid-cols-2">
      <Card>
        <CardHeader className="pb-1">
          <CardTitle className="text-[14px]">Request</CardTitle>
        </CardHeader>
        <dl className="divide-y divide-border">
          <Row label="URL" mono>
            <a href={req.url} target="_blank" rel="noreferrer noopener" className="text-accent underline-offset-4 hover:underline">
              {req.url}
            </a>
          </Row>
          {req.finalUrl && req.finalUrl !== req.url ? (
            <Row label="Final URL" mono>
              {req.finalUrl}
            </Row>
          ) : null}
          <Row label="Method" mono>
            {req.method}
          </Row>
          <Row label="Domain">{req.domain}</Row>
          <Row label="Format" mono>
            {req.format}
          </Row>
          <Row label="Source">
            <Badge variant="outline">{req.source}</Badge>
            {req.browser ? (
              <Badge variant="warning" className="ml-1.5">
                browser requested
              </Badge>
            ) : null}
          </Row>
          <Row label="Project">
            {req.projectName}
            {otherProject ? <span className="ml-1.5 text-[11.5px] text-fg-subtle">(not the current project)</span> : null}
          </Row>
          <Row label="API key">
            {req.apiKey ? (
              <span className="inline-flex flex-wrap items-center gap-1.5">
                <Link href="/dashboard/api-keys" className="underline-offset-4 hover:underline">
                  {req.apiKey.name}
                </Link>
                <code className="font-mono text-[12px] text-fg-muted">
                  {req.apiKey.prefix}…{req.apiKey.last4}
                </code>
                {req.apiKey.revoked ? <Badge variant="danger">revoked</Badge> : null}
              </span>
            ) : (
              <span className="text-fg-subtle">{req.source === "playground" ? "Playground (no key)" : "—"}</span>
            )}
          </Row>
          <Row label="Session">
            {req.sessionId ? (
              <Link href="/dashboard/sessions" className="font-mono text-accent underline-offset-4 hover:underline">
                {req.sessionId}
              </Link>
            ) : (
              <span className="text-fg-subtle">none</span>
            )}
          </Row>
        </dl>
      </Card>
      <Card>
        <CardHeader className="pb-1">
          <CardTitle className="text-[14px]">Routing and result</CardTitle>
        </CardHeader>
        <dl className="divide-y divide-border">
          <Row label="Network">
            <NetworkLabel network={req.network} requested={req.requestedNetwork} />
            <span className="ml-1.5 text-[11.5px] text-fg-subtle">requested {req.requestedNetwork}</span>
          </Row>
          <Row label="Location" mono>
            {[req.country, req.region, req.city].filter(Boolean).join(" · ") || <span className="font-sans text-fg-subtle">any</span>}
          </Row>
          <Row label="HTTP status">
            <HttpCode code={req.httpStatus} />
          </Row>
          <Row label="Latency" mono>
            {formatMs(req.latencyMs)}
          </Row>
          <Row label="Attempts" mono>
            {req.attempts}
          </Row>
          <Row label="Bytes in / out" mono>
            {formatBytes(req.bytesIn)} / {formatBytes(req.bytesOut)}
          </Row>
          <Row label="Price" mono>
            {formatUsd(req.priceUsd, true)}
            {req.cached ? <Badge variant="info" className="ml-1.5 font-sans">cached</Badge> : null}
          </Row>
          {req.errorCode ? (
            <Row label="Error" mono>
              <span className="text-danger">{req.errorCode}</span>
              {req.errorMessage ? <div className="mt-0.5 font-sans text-fg-muted">{req.errorMessage}</div> : null}
            </Row>
          ) : null}
          <Row label="Completed">{req.completedAt ? formatDate(req.completedAt, { timeStyle: "medium" }) : <span className="text-fg-subtle">pending</span>}</Row>
        </dl>
      </Card>
    </div>
  );

  return (
    <div className="flex flex-col gap-5">
      <Link href="/dashboard/requests" className="inline-flex items-center gap-1 text-[12.5px] text-fg-muted underline-offset-4 hover:text-fg hover:underline">
        <ArrowLeft className="size-3.5" /> Requests
      </Link>
      <PageHeader
        eyebrow="Request"
        title={
          <span className="inline-flex flex-wrap items-center gap-2">
            <span className="font-mono text-[18px] sm:text-[20px]">{req.id}</span>
            <CopyButton value={req.id} />
            <StatusBadge status={req.status} />
          </span>
        }
        description={
          <>
            {formatDate(req.createdAt, { timeStyle: "medium" })} ({timeAgo(req.createdAt)}) · {req.method} {req.domain}
          </>
        }
        actions={
          <Button asChild variant="outline" size="sm">
            <Link href={`/dashboard/requests?id=${encodeURIComponent(req.id)}`}>Find in log</Link>
          </Button>
        }
      />

      {req.status === "failed" && errorHelp ? (
        <Alert variant="danger" title={req.errorCode ?? "Request failed"}>
          {req.errorMessage ?? errorHelp}
          {req.errorMessage && req.errorMessage !== errorHelp ? <span className="block text-fg-subtle">{errorHelp}</span> : null}
        </Alert>
      ) : null}

      <div className="grid gap-5 lg:grid-cols-[1fr_280px]">
        <div className="min-w-0">
          <RequestDetailTabs
            attemptCount={req.attemptRows.length}
            headerCount={headerCount}
            overview={overview}
            attempts={
              <Card>
                <CardHeader>
                  <CardTitle className="text-[14px]">Attempts</CardTitle>
                  <CardDescription>Each route the router tried, in order. A blocked route escalates to another network or IP automatically.</CardDescription>
                </CardHeader>
                <CardContent>
                  <AttemptsTimeline attempts={req.attemptRows} providerVisibility={ws.organization.providerVisibility} />
                </CardContent>
              </Card>
            }
            headers={<HeadersTables request={req.requestHeaders} response={req.responseHeaders} />}
            timing={<TimingWaterfall timing={req.timing} totalMs={req.latencyMs} />}
          />
        </div>
        <aside className="flex flex-col gap-4">
          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="flex items-center gap-2 text-[14px]">
                <LifeBuoy className="size-4 text-fg-subtle" aria-hidden /> Need help?
              </CardTitle>
            </CardHeader>
            <CardContent className="text-[13px] text-fg-muted">
              Include this request ID when contacting{" "}
              <a href={`mailto:support@fetcha.co?subject=${encodeURIComponent(`Request ${req.id}`)}`} className="text-accent underline-offset-4 hover:underline">
                support@fetcha.co
              </a>
              . It lets us trace every attempt without you sharing the URL or headers.
              <div className="mt-3 flex items-center gap-1 rounded-md border border-border bg-bg-subtle px-2 py-1 font-mono text-[12px] text-fg">
                <span className="truncate">{req.id}</span>
                <CopyButton value={req.id} className="ml-auto" />
              </div>
            </CardContent>
          </Card>
          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-[14px]">Reading this page</CardTitle>
            </CardHeader>
            <CardContent className="space-y-2 text-[12.5px] text-fg-muted">
              <p>
                <strong className="text-fg">Attempts</strong> greater than 1 means the first route was blocked or timed out and the router escalated. You are billed for the bytes that were actually transferred.
              </p>
              <p>
                <strong className="text-fg">Network</strong> is the class that served the final attempt. <code className="font-mono">auto</code> resolves to residential today.
              </p>
            </CardContent>
          </Card>
        </aside>
      </div>
    </div>
  );
}